<template>
  <div class="markerListBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane class="contentPanel" v-for="(markers, index) in markerListDataFormat" :key="index" :label="markers.name" :name="markers.name">
        <ul class="contentUl">
          <li v-for="(markerMsg, msgIndex) in markers.data" :key="msgIndex" class="msgDataItem">
            <img src="../../assets/images/mapIconTest/test1.jpg" alt="">
            <span>
              <span>名称：{{markerMsg.data.name || '标注未编辑'}}</span>
              <span>备注：{{markerMsg.data.remark || '标注未编辑'}}</span>
            </span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    },
    computed: {
      // 将选中标注 按标注类型分类
      markerListDataFormat () {
        var result = [], resultTemp = {}
        var name, data
        this.markerListData.forEach(v => {
          name = v.getExtData().markerType
          if (!(resultTemp[name] instanceof Array)) {
            resultTemp[name] = []
          }
          resultTemp[name].push({name, data: v.getExtData()})
        })
        for (var i in resultTemp) {
          if (resultTemp.hasOwnProperty(i)) {
            result.push({
              name: i,
              data: resultTemp[i]
            })
          }
        }
        this.activeName = result[0] && result[0].name
        return result
      }
    },
    props: {
      markerListData: {
        type: Array
      }
    },
    model: {
      'prop': 'markerListData',
      'event': 'markerListData'
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    },
    mounted () {
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  .markerListBox {
    background-color: #3f4249;
    border: 1px solid #00eaff;
    color: #fff;
    padding: 10px;
    .contentPanel {
      .contentUl {
        width: 120%;
        height: 200px;
        overflow-y: auto;
      }
    }
    .el-tabs__item {
      color: #fff;
    }
    .is-active {
      color: #00eaff;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      background-color: #00eaff;
    }
    .msgDataItem {
      padding: 5px;
      font-size: 14px;
      &:after {
        display: block;
        content: " ";
        clear: both;
      }
      >img {
        float: left;
        height: 80px;
      }
      >span {
        display: block;
        float: left;
        padding: 4px 0;
        >span {
          display: block;
          padding: 4px 10px;
        }
      }
    }
  }
</style>
